<template>
  <section>
    <div class="contractContainer" style="margin-top:3rem;">
      <header>广州市住房租赁合同</header>
      <article>
        <div class="landlordInfo">
           <div class="registerInfo">
             <span>出租人（甲方）：</span>
             <span :class="{'company_name': isJGFY}">{{ isJGFY ? '广州城投住房租赁发展投资有限公司' : contractDetail.landlord.trueName}}</span>
           </div>
          <div class="creditStyle">
             <span>证件类型：</span>
             <span>{{ isJGFY ? '营业执照号' : '身份证'}}</span>
           </div>
           <div class="creditNum">
              <span>证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
             <span>{{ isJGFY ? '91440101MA5AM57036' : contractDetail.landlord && contractDetail.landlord.idCard}}</span>
           </div>
           <div class="telNum">
              <span>联系电话：</span>
             <span>{{contractDetail.landlord && contractDetail.landlord.mobile}}</span>
           </div>
           <div class="emailNum">
              <span>电子邮箱：</span>
             <span>-</span>
           </div>
           <div class="addressInfo">
              <span>通讯地址：</span>
             <span class="landlord_addressInfo">{{ isJGFY ? '广州市越秀区流花路117号内自编22号5层501室' : '-'}}</span>
           </div>
           <div class="bankAccount">
              <span>收款账户（银行账户或网络支付账户）：</span>
             <span>-{{contractDetail.landlord.bankAccount}}</span>
           </div>
        </div>
        <div class="tenantInfo">
           <div class="registerInfo">
             <span>承租人（乙方）：</span>
             <span>{{contractDetail.renter.trueName}}</span>
           </div>
          <div class="creditStyle">
             <span>证件类型：</span>
             <span>身份证</span>
           </div>
           <div class="creditNum">
              <span>证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
             <span>{{contractDetail.renter.idCard}}</span>
           </div>
           <div class="telNum">
              <span>联系电话：</span>
             <span>{{contractDetail.renter.mobile}}</span>
           </div>
           <div class="emailNum">
              <span>电子邮箱：</span>
             <span>-</span>
           </div>
           <div class="addressInfo">
              <span>通讯地址：</span>
             <span>-</span>
           </div>
           <div class="bankAccount">
              <span>收款账户（银行账户或网络支付账户）：</span>
             <span>-{{contractDetail.renter.bankAccount}}</span>
           </div>
        </div>
        <p class="contractRule">根据《中华人民共和国合同法》《中华人民共和国城市房地产管理法》及其他有关法律、法规的规定，甲方和乙方本着平等、自愿、公平、诚实信用的原则，经协商一致，就住房租赁有关事宜达成如下协议：</p>
       <div class="ruleOne">
         <p class="titleOne"><b>第一条  房屋的情况及居住要求</b></p>
         <p class="contentOne">（一）房屋坐落：<!-- <span class="contentOneDetail">{{contractDetail.housePerson.district}}</span>区<span class="contentOneNum">-</span>行政街（镇 -->
         <span class="col__address">{{contractDetail.housePersons.address || contractDetail.apartment.address}}</span><!-- 路（街、巷、里）
          <span class="contentOneNum">-</span>号（门牌）
          <span class="contentOneNum">{{contractDetail.romm.roomName}}</span>房 -->
          <!-- <span class="contentOneNum">-</span>部位（分租），房屋建筑面积 -->
          <!-- <span class="contentOneNum">-</span> -->房屋建筑面积
          <span class="contentOneNum">{{contractDetail.romm.area || contractDetail.housePersons.area}}</span>平方米，其中使用面积
          <span class="contentOneNum">{{contractDetail.romm.area || contractDetail.housePersons.area}}</span>平方米。（附《出租房屋平面图》，如分租，须标注分租部位）。
         </p>
          <p class="contentTwo">（二）房屋权属状况(不动产权证书编号)：<span class="contentOneDetail">{{contractDetail.housePersons.housePocCode || contractDetail.apartment.housePocCode}}</span>（房屋所有权证书或有关房屋来源证明文件，填写参考：不动产权证或房地产权证，编号：0000000001，须附相关附件）。</p>
          <p class="contentThree">（二）房屋居住人数限 <span class="contentOneNum"> {{contractDetail.order.personQuantity}}</span>人，不得安排人员在厨房、卫生间、阳台和地下储藏室居住。</p>
       </div>
      </article>
    </div>
  </section>
</template>
<script>
export default {
  data () {
    return {
      // contract: this.contractDetail.contract,
      // renter: this.contractDetail.renter,
      // landlord: this.contractDetail.landlord,
      // order: this.contractDetail.order,
      // renterPerson: this.contractDetail.renterPerson,
      // apartment: this.contractDetail.apartment
    }
  },
  computed: {
    // 是否是机构房源
    isJGFY () {
      return +this.contractDetail.houseType === 2 || +this.contractDetail.apartment.houseType === 2 || +this.contractDetail.order.houseType === 2 || +this.contractDetail.housePersons.houseType === 2
    }
  },
  props: ['contractDetail']
}
</script>
<style lang="less" scoped>
.company_name, .landlord_addressInfo {
  font-size: 11px;
}

 section{
    width: 100%;
    height: 100%;
    line-height:1;
    overflow:hidden;
  }
  .contractContainer{
    position: relative;
  }
  header{
       font-size:1.25rem;
       text-align: center;
       margin-bottom: 2rem;
    }
    .landlordInfo,.tenantInfo,.creditStyle,.creditNum,.telNum,.emailNum,.addressInfo,.bankAccount{
      font-size: 0.8rem;
      margin-top:2rem;
    }
    .tenantInfo{
      margin-top:2.5rem;
    }
    article>div>div>span:nth-child(1){
      display:inline-block;
    }
    article>div>div>span:nth-child(2){
      width: 73%;
      display:inline-block;
      text-align: left;
       border-bottom:1px solid black;
       text-align: center;
    }
  .registerInfo>span:nth-child(2){
    display:inline-block;
    width:10rem;
    line-height: 1;
    padding-bottom:2px;
    border-bottom:1px solid black;
  }
  .registerInfo>span:nth-child(1){
    width:6.9rem;
    height: 100%;
    top:50%;
    left:0;
    display:inline-block;
   }
   .registerInfo>span:nth-child(1)>b{
     width: 100%;
     display:inline-block;
   }
  .bankAccount>span:nth-child(2){
  display:inline-block;
  width: 100%;
  margin-top:1rem;
  }
   .contractRule{
     margin-top:2rem;
     text-indent: 1.25rem;
     font-size: 0.8rem;
     line-height: 1.4;
   }
.ruleOne{
   font-size:0.8rem;
   line-height: 1.4;
   margin-top:1rem;
   text-indent:1.25rem;
}
.contentOneDetail{
    width: 60%;
    height: 1rem;
    font-size: 0.8rem;
    display:inline-block;
    line-height: 1.4;
    text-align: center;
    overflow: show;
    border-bottom:1px solid black;
}
.contentOneNum{
    width: 20%;
    height: 1rem;
    font-size: 0.8rem;
    display:inline-block;
    line-height: 1.4;
    overflow: show;
    border-bottom:1px solid black;
}
.col__address {
    width: auto;
    border-bottom: 1px solid black;
    font-size: 14px;
    padding: 0 18px;
}
.contentTwo{
   line-height: 1.4;
   margin-bottom:0.25rem;
    margin-top:0.25rem;
}
.contentOneDetail{
    width:40%;
     text-align: center; 
   }
   .bankAccount>span:nth-child(1){
     text-indent:0rem;
   }
   .contentOne>.contentOneDetail{
     width:100%;
    height: 1rem;
    font-size: 0.8rem;
    // display:inline-block;
    line-height: 1.4;
    text-align: center;
    margin-left:-1rem;
    overflow: show;
    word-break:keep-all;
    white-space:nowrap;
    border-bottom:1px solid black;
   }
   .registerInfo{
     display:flex;
     width:100%;
     line-height: 1;
   }
</style>

